<template>
<div>
  <div class="goodsActive" v-if="showProducts">
    <div class="goodsActiveDiv">
      <div class="goodsActiveDivImg">
        <swiper autoplay="true" duration="1000" interval="3000" circular="circular" height="558">
           <block v-for="(item, index) in bannerImgUrl" :key="index">
              <swiper-item>
                <image :src="item" class="slide-image" height="558"/>
              </swiper-item>
            </block>
        </swiper>
      </div>

      <div class="goodsActiveDivTxt">
        <div><span></span></div>
        <h3 v-if="goodslist.length>0">{{goodslist[0].productName}}</h3>
        <p v-if="goodslist.length>0">{{goodslist[0].description}}</p>
      </div>
    </div>

    <div class="imglist" >
     <goods-item :goddsItem="goodslist"></goods-item>  
    </div>

  </div>
  <div class="showBanners" v-if="showBanners">
    <img :src="bannersActiveIntro" mode="widthFix">
  </div>
</div>
</template>

<script>
  import GoodsItem from '@/components/index/goods-item'
  export default {
    components: {
      GoodsItem
    },
    data () {
        return {
          bannerImgUrl: false,
          goodslist: [],
          showProducts: Boolean,//是否显示活动页图片
          showBanners: Boolean,//是否显示活动的规则介绍图片
          bannersActiveIntro: '',//活动规则的图片
        }
    }, 
    onLoad(option){
      console.log(option.link)
      let linkType = option.link.substring(1,option.link.lastIndexOf('/'))
      console.log(linkType)
      if(linkType == 'products'){
        this.showProducts = true
        this.showBanners = false
        this.requestData(option.link)
      }else if(linkType == 'banners'){
        this.showProducts = false
        this.showBanners = true
        this.requestData(option.link)
      }
    },
    methods: {
      requestData (link) {
        this.$http.get(`products?link=${link}`).then((res)=>{ 
            if(res.data.data){
              if(this.showProducts){
                this.bannerImgUrl = res.data.data.bannerImgUrls;
              }
              if(this.showBanners){
                this.bannersActiveIntro = res.data.data
              }
              this.goodslist = [
                {
                  productName: res.data.data.name,
                  productId : res.data.data.productId,
                  sellPrice : res.data.data.sellPrice,
                  showPrice : res.data.data.showPrice,
                  imgUrl : res.data.data.url,
                  description: res.data.data.description,
                }
              ]
            }else{
              this.wxAlert(res.data.msg)
            }
        })
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    },
  }
</script>

<style scoped>
.goodsActive {
  width: 100%;
  overflow: hidden;
  background: #efeff4;
}
.goodsActive .goodsActiveDiv{
  background: #fff; 
}
.goodsActive .goodsActiveDivImg,.goodsActive .goodsActiveDivImg swiper{
  width: 100%;
  height: 560rpx;
}
.goodsActive .goodsActiveDivImg img,.goodsActive .goodsActiveDivImg swiper swiper-item image{
  width: 100%;
  height: 100%;
}
.goodsActive .goodsActiveDivTxt{
  padding: 0 30rpx;
  padding-bottom: 100rpx;
  text-align: center;
}
.goodsActive .goodsActiveDivTxt>div{
  display: flex;
  justify-content: center;
}
.goodsActive .goodsActiveDivTxt>div span{
  display: block;
  width: 50rpx;
  height: 2rpx;
  background: #000;
  margin: 50rpx 0;
}
.goodsActive .goodsActiveDivTxt>h3{
  font-size: 40rpx;
  color: #000;
  font-weight: 600;
  line-height: 52rpx;
  margin-bottom: 48rpx;
}
.goodsActive .goodsActiveDivTxt>p{
  font-size: 34rpx;
  color: #555555;
  line-height: 48rpx;
}
.showBanners img{
  width: 100%;
  height: auto;
}
</style>
